<template>

    <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="领用人">
            <el-input v-model="form.Accpetance_Person" />
        </el-form-item>
        <el-form-item label="领用时间">
            <el-date-picker v-model="form.AccpetanceTime" type="datetime" placeholder="选择日期时间" />
        </el-form-item>
        <el-form-item label="审批状态" style="width:200px">
            <el-select v-model="form.AuditStatus" placeholder="请选择">
                <el-option label="请选择" :value="0" />
                <el-option label="待提交" :value="1" />
                <el-option label="待审批" :value="2" />
                <el-option label="已通过" :value="3" />
                <el-option label="已拒绝" :value="4" />
            </el-select>
        </el-form-item>

        <el-form-item label="审批人">
            <el-input v-model="form.Approver" />
        </el-form-item>


        <el-form-item>
            <el-button type="primary" @click="getList">提交</el-button>
        </el-form-item>
    </el-form>







    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="title" label="标题" width="180" />
        <el-table-column prop="describe" label="用途描述" width="180" />
        <el-table-column prop="accpetance_Person" label="领用人" />
        <el-table-column prop="" label="领用时间">
            <template #default="scope">
                <span>{{ scope.row.accpetanceTime }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="" label="创建时间">
            <template #default="scope">
                <span>{{ scope.row.createTime }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="" label="审批状态">
            <template v-slot="scope">

                <el-tag v-if="scope.row.auditStatus == 1">待提交</el-tag>
                <el-tag v-else-if="scope.row.auditStatus == 2">待审批</el-tag>
                <el-tag v-else-if="scope.row.auditStatus == 3">已通过</el-tag>
                <el-tag v-else-if="scope.row.auditStatus == 4">已拒绝</el-tag>

            </template>
        </el-table-column>
        <el-table-column prop="approver" label="审批人" />
        <el-table-column prop="" label="操作">
            <template v-slot="scope">
                <el-link type="primary" @click="Edit(scope.row)">查看</el-link>&emsp;
                <el-link type="primary" @click="Audit(scope.row)">审批</el-link>&emsp;

            </template>
        </el-table-column>
    </el-table>
    <el-dialog v-model="dialogVisible" title="查看（待审批）" width="800">
        <span>
            <el-form ref="ruleFormRef" style="max-width: 600px;margin: 30px auto;" :model="form" label-width="auto"
                class="demo-ruleForm" status-icon>
                <el-form-item label="标题" prop="title">
                    <el-input v-model="fan.title" />
                </el-form-item>
                <el-form-item label="用途描述" prop="describe">
                    <el-input v-model="fan.describe" />
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="fan.remark" />
                </el-form-item>


                <el-table :data="info" border style="margin:20px 50px;">
                    <el-table-column label=" 货物名称" prop="goods_name"></el-table-column>
                    <el-table-column label="类型" prop="">
                        <template #default="scope">
                            <el-if v-if="scope.row.type == 0">
                                车辆用品</el-if>
                            <el-if v-else-if="scope.row.type == 1">
                                办公用品</el-if>
                        </template>
                    </el-table-column>
                    <el-table-column label="材质" prop="">
                        <template #default="scope">
                            <el-if v-if="scope.row.material == 0">
                                金属</el-if>
                            <el-if v-else-if="scope.row.material == 1">
                                橡胶</el-if>
                            <el-if v-else-if="scope.row.material == 2">
                                塑料</el-if>
                            <el-if v-else-if="scope.row.material == 3">
                                液体</el-if>
                            <el-if v-else-if="scope.row.material == 4">
                                纸质</el-if>
                        </template>
                    </el-table-column>
                    <el-table-column label="规格" prop="specification"></el-table-column>

                    <el-table-column label="仓库数量" prop="num"></el-table-column>
                    <el-table-column label="领用数量" prop="acceptance_Num">

                    </el-table-column>

                </el-table>
                <el-form-item label="转批人" prop="approver">
                    <el-select v-model="fan.approver" placeholder="请选择">
                        <el-option label="刘永刚" value="刘永刚"></el-option>
                        <el-option label="赵秋实" value="赵秋实"></el-option>
                        <el-option label="于晋哲" value="于晋哲"></el-option>
                        <el-option label="牛骞若" value="牛骞若"></el-option>
                        <el-option label="赵思彤" value="赵思彤"></el-option>
                        <el-option label="孟盘龙" value="孟盘龙"></el-option>
                    </el-select>
                </el-form-item>


                <el-form-item style="margin: 50px 150px">
                    <el-button type="primary" @click="changeacceptance(1)">
                        通过
                    </el-button>
                    <el-button type="danger" @click="changeacceptance(2)">拒绝</el-button>
                </el-form-item>

            </el-form>

        </span>
    </el-dialog>
    <el-dialog v-model="dialogVisible2" title="通过或拒绝" width="800">
        <span>
            <el-form ref="ruleFormRef" style="max-width: 600px;margin: 30px auto;" :model="form" label-width="auto"
                class="demo-ruleForm" status-icon>
                <el-form-item label="标题" prop="title">
                    <el-input v-model="fan.title" />
                </el-form-item>
                <el-form-item label="用途描述" prop="describe">
                    <el-input v-model="fan.describe" />
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="fan.remark" />
                </el-form-item>


                <el-table :data="info" border style="margin:20px 50px;">
                    <el-table-column label=" 货物名称" prop="goods_name"></el-table-column>
                    <el-table-column label="类型" prop="">
                        <template #default="scope">
                            <el-if v-if="scope.row.type == 0">
                                车辆用品</el-if>
                            <el-if v-else-if="scope.row.type == 1">
                                办公用品</el-if>
                        </template>
                    </el-table-column>
                    <el-table-column label="材质" prop="">
                        <template #default="scope">
                            <el-if v-if="scope.row.material == 0">
                                金属</el-if>
                            <el-if v-else-if="scope.row.material == 1">
                                橡胶</el-if>
                            <el-if v-else-if="scope.row.material == 2">
                                塑料</el-if>
                            <el-if v-else-if="scope.row.material == 3">
                                液体</el-if>
                            <el-if v-else-if="scope.row.material == 4">
                                纸质</el-if>
                        </template>
                    </el-table-column>
                    <el-table-column label="规格" prop="specification"></el-table-column>

                    <el-table-column label="仓库数量" prop="num"></el-table-column>
                    <el-table-column label="领用数量" prop="acceptance_Num">

                    </el-table-column>

                </el-table>
                <h3>审批记录</h3>
                <el-table :data=infolist style="margin-top: 20px;">
                    <el-table-column label="审批结果" prop="approvalResult">
                        <template v-slot="scope">
                            <el-tag v-if="scope.row.approvalResult == 1">待提交</el-tag>
                            <el-tag v-else-if="scope.row.approvalResult == 2">待审批</el-tag>
                            <el-tag v-else-if="scope.row.approvalResult == 3">已通过</el-tag>
                            <el-tag v-else-if="scope.row.approvalResult == 4">已拒绝</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="备注" prop="approvalRemark">
                    </el-table-column>
                    <el-table-column label="审批时间" prop="">
                        <template v-slot="scope">
                            {{ scope.row.approvalDate.substring(0, 10) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="审批人" prop="approvalName"></el-table-column>

                </el-table>


            </el-form>

        </span>
    </el-dialog>
    <div class="demo-pagination-block">
        <el-pagination v-model:current-page="form.PageIndex" v-model:page-size="form.PageSize"
            :page-sizes="[1, 2, 30, 40]" :background="true" layout="total, sizes, prev, pager, next, jumper"
            :total="form.totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

import axios from '../../../api/http'
//对话框
const dialogVisible = ref(false)
const dialogVisible2 = ref(false)
onMounted(() => {
    getList();
    GetByid();


})
const form = reactive({
    Accpetance_Person: '',
    AccpetanceTime: '',
    AuditStatus: 0,
    Approver: '',
    PageIndex: 1,
    PageSize: 10,
    totalCount: 0,
    pageCount: 0,
})


const fan = reactive({
    "acceptanceId": "",
    "title": "",
    "describe": "",
    "remark": "",
    "article": "",
    "acceptance_Num": 0,
    "accpetance_Person": "",
    "accpetanceTime": "",
    "approver": "",
    "auditStatus": 0,
    "createTime": "",
    "updatedTime": "",
    "createdName": "",
    "updatedName": "",
    "is_Deleted": 0
})




const handleSizeChange = (val: number) => {
    form.PageSize = val;
    getList();
}
const handleCurrentChange = (val: number) => {
    form.PageIndex = val;
    getList();
}



//显示
const tableData = ref([]);
const getList = () => {
    axios.post('/approval-read/api/Acceptance/GetAccpetanceList', form).then(res => {
        // 使用 res.data 获取实际响应数据
        tableData.value = res.result.data;
        form.totalCount = res.result.totalCount;
        form.pageCount = res.result.pageCount;
        console.log(tableData.value)
    }).catch(error => {
        console.log(error)
    });
}

//查看
const Edit = (data: any) => {
    dialogVisible.value = true;
    fan.acceptanceId = data.acceptanceId
    fan.title = data.title;
    fan.describe = data.describe;
    fan.remark = data.remark;
    fan.article = data.article;
    fan.accpetance_Person = data.accpetance_Person;
    fan.approver = data.approver;
    fan.auditStatus = data.auditStatus;
    info.value.forEach((c: any) => {
        c.acceptance_Num = data.acceptance_Num;
    })
    console.log(data)
}
//审批
const Audit = (data: any) => {
    dialogVisible2.value = true;
    fan.title = data.title;
    fan.describe = data.describe;
    fan.remark = data.remark;
    fan.article = data.article;
    fan.accpetance_Person = data.accpetance_Person;
    fan.approver = data.approver;
    fan.auditStatus = data.auditStatus;
    info.value.forEach((c: any) => {
        c.acceptance_Num = data.acceptance_Num;
    })
    console.log(data)
    auditlist(data.acceptanceId);
}


//显示

const info = ref([])
const GetByid = () => {
    // 请求数据
    axios.get("/approval-read/api/Acceptance/GetByIdStorage").then(res => {
        info.value = res.result
        console.log(info.value)
    });

}
//通过拒绝
//审批
const changeacceptance = async (state: any) => {
    axios.post('/approval-read/api/Acceptance/AcceptApprovel?type=' + state, fan)
        .then(res => {
            if (res > 0) {
                ElMessage.success('审批成功')
                getList()
            }
            else {
                ElMessage.error('审批失败')
            }
            dialogVisible.value = false;
        })
}

//审批记录
const infolist = ref([])

const auditlist = (acceptanceId: any) => {
    // 请求数据
    axios.get("/approval-read/api/Acceptance/GetApprovalrecordList?Id=" + acceptanceId).then(res => {
        infolist.value = res
        console.log(infolist.value)
    });

}




</script>
